#要素

グラフの種類には各データセットのスタイルを構成するための設定が用意されていますが、場合によってはスタイルを設定したい場合があります。すべてのデータセットを同じ方法で。一般的な例は、棒グラフ内のすべての棒を同じ色で描画しますが、データセットごとに塗りつぶしを変更することです。オプションは 4 つの異なるタイプの要素に対して構成できます。アークポイント、 とバー。これらのオプションを設定すると、データセットにアタッチされた構成によって特にオーバーライドされない限り、そのタイプのすべてのオブジェクトに適用されます。

#グローバル構成

要素のオプションは、チャートごとに指定することも、グローバルに指定することもできます。要素のグローバル オプションは次のように定義されます。Chart.defaults.elements。たとえば、すべての棒グラフの境界線の幅をグローバルに設定するには、次のようにします。

Chart.defaults.elements.bar.borderWidth = 2;

#ポイント構成

ポイント要素は、折れ線グラフ、レーダー チャート、またはバブル チャート内のポイントを表すために使用されます。

名前空間:options.elements.point、グローバル ポイント オプション:Chart.defaults.elements.point

名前 タイプ デフォルト 説明
radius number 3 ポイントの半径。
pointStyle pointStyle 'circle' ポイントスタイル。
rotation number 0 点の回転 (度単位)。
backgroundColor Color Chart.defaults.backgroundColor ポイントの塗りつぶしの色。
borderWidth number 1 ポイントのストローク幅。
borderColor Color 'Chart.defaults.borderColor ポイントストロークの色。
hitRadius number 1 ヒット検出のためにポイント半径に追加の半径が追加されました。
hoverRadius number 4 ホバー時のポイントの半径。
hoverBorderWidth number 1 ホバー時のストローク幅。

#ポイントスタイル

#種類

pointStyle引数は次のタイプの入力を受け入れます。stringImageHTMLCanvasElement

#情報

文字列を指定すると、次の値がサポートされます。

  • 'circle'
  • 'cross'
  • 'crossRot'
  • 'dash'
  • 'line'
  • 'rect'
  • 'rectRounded'
  • 'rectRot'
  • 'star'
  • 'triangle'
  • false

値が画像またはキャンバス要素の場合、その画像またはキャンバス要素は次を使用してキャンバス上に描画されます。描画イメージ (新しいウィンドウが開きます)

#回線構成

線要素は、折れ線グラフの線を表すために使用されます。

名前空間:options.elements.line、グローバル ライン オプション:Chart.defaults.elements.line

名前 タイプ デフォルト 説明
tension number 0 ベジェ曲線張力 (0ベジェ曲線がない場合)。
backgroundColor Color Chart.defaults.backgroundColor 線の塗りつぶしの色。
borderWidth number 3 線のストロークの幅。
borderColor Color Chart.defaults.borderColor 線のストロークの色。
borderCapStyle string 'butt' ラインキャップスタイル。見るMDN (新しいウィンドウが開きます)
borderDash number[] [] ラインダッシュ。見るMDN (新しいウィンドウが開きます)
borderDashOffset number 0.0 破線のオフセット。見るMDN (新しいウィンドウが開きます)
borderJoinStyle 'round'|'bevel'|'miter' 'miter' 線結合スタイル。見るMDN (新しいウィンドウが開きます)
capBezierPoints boolean true trueベジェ制御をチャート内に維持するため、false制限はありません。
cubicInterpolationMode string 'default' 適用する補間モード。続きを見る...
fill boolean|string false 線の下の領域を埋める方法。見る面グラフ
stepped boolean false true線を階段状の線として表示するには (tension無視されます)。

#バーの構成

棒要素は、棒グラフ内の棒を表すために使用されます。

名前空間:options.elements.bar、グローバル バー オプション:Chart.defaults.elements.bar

名前 タイプ デフォルト 説明
backgroundColor Color Chart.defaults.backgroundColor バーの塗りつぶしの色。
borderWidth number 0 バーのストローク幅。
borderColor Color Chart.defaults.borderColor バーのストロークの色。
borderSkipped string 'start' スキップされた (除外された) 境界線:'start''end''middle''bottom''left''top''right'またfalse
borderRadius number|object 0 バーの境界線の半径 (ピクセル単位)。
inflateAmount number|'auto' 'auto' 描画時にバー長方形を膨張させるピクセルの量。
pointStyle string|Image|HTMLCanvasElement 'circle' 凡例のポイントのスタイル。

#アーク構成

円弧は極地、ドーナツ、円グラフで使用されます。

名前空間:options.elements.arc、グローバル円弧オプション:Chart.defaults.elements.arc

名前 タイプ デフォルト 説明
angle- 極性のみ number circumference / (arc count) カバーする円弧の角度。
backgroundColor Color Chart.defaults.backgroundColor 円弧の塗りつぶしの色。
borderAlign 'center'|'inner' 'center' 円弧ストロークの位置合わせ。
borderColor Color '#fff' 円弧のストロークの色。
borderDash number[] [] アークラインダッシュ。見るMDN (新しいウィンドウが開きます)
borderDashOffset number 0.0 円弧線の破線のオフセット。見るMDN (新しいウィンドウが開きます)
borderJoinStyle 'round'|'bevel'|'miter' 'bevel'|'round' 線結合スタイル。見るMDN (新しいウィンドウが開きます)。デフォルトは'round'いつborderAlign'inner'
borderWidth number 2 円弧のストローク幅。
circular boolean true デフォルトでは、円弧は曲線になっています。もしもcircular: false弧は平らになります
最終更新: 2023 年 4 月 28 日、午前 5 時 18 分 20 秒